<template>
  <view
    class="list ss-flex ss-row-left ss-r-20 ss-shadow"
    v-for="(i, index) in dataList"
    :key="index"
    @click="handleDetail(i)"
  >
    <view class="list_l" />
    <view class="ss-grey-2 ss-p-x-20 ss-w-100 ss-font-24">
      <view class="ss-m-y-14 ss-font-28 ss-black">
        {{ i.name || "-" }}
      </view>
      <view class="ss-m-y-10 ss-flex">
        {{ i.createTime }}
        <view class="mes ss-m-x-20">{{ i.passStatus != 1 ? "存在不合格项" : "" }}</view>
      </view>
      <view class="ss-m-y-12 ss-flex ss-font-24">
        <view class="ss-grey-1">
          {{ getReportTime(i.createTime) }}
        </view>
        <view class="ss-flex ss-col-center">
          <image src="../../static/icon_member.png" class="im ss-m-x-10" />
          <view>
            {{ i.nickName || "" }}
          </view>
        </view>
      </view>
    </view>
  </view>
  <uv-load-more v-if="dataList.length > 0" :status="status" class="ss-p-y-30" />
  <uv-empty
    v-if="dataList.length == 0"
    margin-top="20vh"
    :icon="empty"
    text="暂无待审批报告"
  />
</template>
<script setup>
import { onMounted, ref, reactive, onBeforeUnmount } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import { reportList } from "@/request/task.js";
import empty from "@/static/empty.png";

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: 3, // 报告状态
});
const dataList = ref([]); // 数据列表
const total = ref(0); // 总条数
const status = ref("loadmore"); // 加载状态

onMounted(() => {
  getList();
  uni.$on("reportList", () => {
    uni.$emit("untreated");
    getList();
  });
});

onBeforeUnmount(() => {
  uni.$off("reportList");
});

onReachBottom(() => {
  if (dataList.value.length < total.value) {
    queryParams.pageNum++;
    getList();
  }
});

// 获取任务列表
const getList = () => {
  status.value = "loading";
  reportList(queryParams)
    .then((res) => {
      if (res.code == 200) {
        let list = res.data.records;
        dataList.value = queryParams.pageNum == 1 ? list : dataList.value.concat(list);
        total.value = res.data.total;
      }
    })
    .finally(() => {
      status.value = total.value > dataList.value.length ? "loadmore" : "nomore";
    });
};

// 跳转
const handleDetail = (item) => {
  uni.navigateTo({
    url: "/pages/Task/reportDetails?id=" + item.id,
  });
};

// 获取报告时间
const getReportTime = (e) => {
  let date = new Date(e);
  if (!e) return "";
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  return `${year} ${month}月报告`;
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

.list {
  width: 90%;
  margin: 30rpx auto;
  overflow: hidden;

  .list_l {
    width: 22rpx;
    height: 160rpx;
    background-color: #85c889;
  }

  .im {
    width: 30rpx;
    height: 30rpx;
  }

  .mes {
    color: red;
  }
}
</style>
